<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/layui/css/layui.css" />
    <link rel="stylesheet" href="./css/bootstrap.css" />
  
    <!-- <link rel="stylesheet" href="./css/sortable.min.css" /> -->
    <style>
      .navbar-header {
        width: 200px;
        margin: 0 auto;
        float: none;
      }
      .navbar-brand {
        font-size: 24px;
      }

      .projects-header {
        margin-top: 61px;
        text-align: center;
      }

      [data-sjsel] {
        top: auto;
        opacity: 1;
      }

      select,
      input,
      textarea {
        height: 34px;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        cursor: pointer;
        outline: none;
        padding-left: 4px;
      }
      .form-group {
        margin: 10px;
      }

      #row {
        display: flex;
        flex-wrap: wrap;
      }

      .projects-header {
        text-align: left;
      }
      label {
        margin: 0 10px;
      }
      .caption p{
        font-size: 13px;
        color: #5c5c5c;
        margin: 10px 0 0 0;
      }
      .caption hr{
        margin: 0;
        
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <!-- 顶部菜单 -->
      <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
          <a class="navbar-brand hidden-sm">项目提交生成</a>
        </div>
      </div>

      <!-- 条件定制区 -->
      <div class="projects-header page-header">
        <p>
          输入相关信息，系统将会生成标准格式的项目描述
          <a href="./index.html">点击进入到项目查询页面</a>
        </p>
        <hr />
        <form class="form">
          <div class="form-group">
            <!-- <label for="exampleInputName2">项目名称</label>
            <input
              type="text"
              style="width: 300px"
              data-toggle="tooltip"
              data-placement="top"
              title="项目名称必须按照行业或公司+类型+属性的组合命名"
              placeholder="例如：美的返修订单管理系统（PC端）"
            /> -->

            <!-- <label for="exampleInputName2">项目周期</label>
            <select name="" id="projecttime">
              <option value="1">1个月</option>            
            </select> -->

            <label for="exampleInputName2">技术框架</label>
            <select name="" id="Framework">
              <option value="1">Vue</option>
          
            </select>

            <label for="exampleInputName2">项目大类</label>
            <select name="" id="projectType1">
              <option value="-1">--请选择项目类型--</option>
              <option value="1">OA类型后台管理系统</option>
              <option value="2">商城后台管理系统</option>
            </select>
            
          <button
          type="button"
          id="btnpost"
          class="btn btn-success btn-lg"
          style="margin-left: 40px"
        >
          提交
        </button>
          </div>

          <div class="form-group">
            <label for="exampleInputName2">项目名称</label>
            <input
            id="pname"
            type="text"
            style="width: 600px"
            data-toggle="tooltip"
            data-placement="right"
            title="项目名称必须按照行业或公司+类型+属性的组合命名"
            placeholder="例如：美的返修订单管理系统（PC端）"  />  
          </div>
          <div class="form-group">
            <label for="exampleInputName2">项目描述</label>
            <textarea
              id="pdesc"
              type="text"
              style="vertical-align: middle; height: 80px; width: 920px"
              data-toggle="tooltip"
              data-placement="right"
              placeholder="例如：iHRM是一款基于SaaS平台的人力资源管理平台，本系统集中了Vuejs中台项目的一些常规开发模式和技巧.包括 项目的搭建,多角色用户的动态路由, 前端路由的权限拦截和权限认证, 多tab页页面的模式, 多语言模式的应用, 业务组件的封装和抽提, 权限点的设置 和审批流程的引入集成"
              title="请填写项目描述部分内容，通常是介绍这个项目解决的问题，所用的技术是什么"
            ></textarea>           
          </div>
          <div class="form-group">
            <label for="exampleInputName2">项目技术组合</label>         
          <input
          id="pframework"
          type="text"
          style="width: 600px"
          data-toggle="tooltip"
          data-placement="right"
          title="请填写符合该项目的项目技术组合"
          placeholder="例如：Vue2全家桶 + Vuex + iView"  />    
          </div>

          <div class="form-group">
            <label for="exampleInputName2">项目模块和职责</label>
            <input
            class="pmodel"
            style="width: 240px"         
            type="text"           
            placeholder="填写项目模块，例如：权限管理"  />
         
            <input
            class="pmodeldesc"
            type="text"
            style="width: 600px"          
            placeholder="请填写模块职责，例如：Excel数据导入和导出员工数据功能"  />
            <button class="btn btn-default addline" type="button">添加一行</button>
          </div>        
        </form>
      </div>

    </div>

    <script src="./lib/jquery-1.12.2.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./lib/xm-select.js"></script>
    <script src="./lib/layer/layer.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/post.js"></script>
    <script>
      window.domlist = []
     $(function () {
        $('[data-toggle="tooltip"]').tooltip();
        $(".addline").on('click',function() {
          let obj =  $(this).parent().clone();
          obj.find('button').remove();
          obj.appendTo('.form');
          window.domlist.push(obj);
        })
      });
    </script>
  </body>
</html>
